<template>
  <div>
    <navBar title="任务列表" :leftArrow="false" />

    <div class="pageMain">
      <van-row justify="end">
        <van-col span="24" style="text-align: right;">
          <van-button plain hairline type="primary" size="small"  @click="getDataList()">
            <i class="ri-restart-line"></i>
          </van-button>
        </van-col>
      </van-row>
      <el-table :data="tableData" border>
        <el-table-column type="index" label="序号" width="60" align="center"/>
        <el-table-column prop="taskCode" label="工单编号" sortable align="center"/>
        <el-table-column prop="taskName" label="任务名称" align="center"/>
        <el-table-column prop="planNum" label="计划总数"  sortable align="center"/>
        <el-table-column prop="statusDesc" label="任务状态" sortable align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <van-button type="primary" class="btn" @click="handleEdit(scope.row, scope.$index)">执行</van-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="paginationCss">
        <van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" :show-page-size="pageSize" force-ellipses 
        @change="getDataList"/>
      </div>
    </div>

  </div>
</template>
<script>
  import { taskList } from "@/apis/index";
  import navBar from '../../components/navBar/index.vue'

  export default {
    name: "Home",
    data () {
      return {
        tableData:[],
        pageSize:6,
        total: 1,
        currentPage:1,
        serachParam:{
          pageNum: 1,
          pageSize: 6
        }
      };
    },
    components: { navBar },
    mounted () { 
        this.getDataList();
    },
    created () { },
    methods: {
      handleEdit(item){
        //将主任务数据缓存
        sessionStorage.setItem('mainTaskInfo',JSON.stringify(item));
        this.$router.push({
          name: 'taskDetail',
          params: {
            ...item
          },
          query: {
            mainTaskId: JSON.stringify(item.id),
          },
        });
      },
      getDataList() {
          if (sessionStorage.getItem("mainTaskTablePageNum")) {
            this.currentPage = sessionStorage.getItem("mainTaskTablePageNum");
          }
          this.serachParam.pageNum = this.currentPage
          taskList({ ...this.serachParam }).then(res=>{
            if (res.code === 1) {
              this.tableData = res.data.list;
              this.total = res.data.total;
              // Toast(document.documentElement.clientWidth + ' x ' + document.documentElement.clientHeight);
            }
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .btn {
    height: 32px !important;
    margin-right: 10px;
  }

  .btn:last-child {
    margin-right: 0;
  }


  .paginationCss {
    margin-top: 30px;
  }
</style>